<template>
  <div class="form-select-wrap">
    <el-select clearable :filterable="item.config?.filterable" :remote="item.config?.remote" :disabled="item.disabled"
      v-model="form[item.col]" :placeholder="'请选择' + item.label" @change="changeSelect" :remote-method="remoteMethod"
      :loading="loading">
      <el-option v-for="(son, index) in selectOption" :key="son[item.valueKey]" :label="son[item.labelKey]"
        :value="son[item.valueKey]"></el-option>
    </el-select>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "form-select",
  components: {},
  props: {
    form: {
      //下拉选配置项
      type: Object,
      default: function () {
        return {};
      },
      required: true,
    },
    item: {
      //下拉选配置项
      type: Object,
      default: function () {
        return {
          is_required: 1,
          col: "channelId",
          label: "所属分类",
          val: "",
          width: "100",
          type: "select",
          labelKey: "channelName",
          valueKey: "channelId",
          options: [],
          apiConfig: {
            url: "/app/system/newsChannel/list",
            method: "get",
            data: {
              page: 1,
              pageSize: 10,
            },
          },
        };
      },
      required: true,
    },
  },

  data() {
    return {
      selectOption: [],
      loading: false,
    };
  },
  computed: {
    // ...mapState([]),
  },

  created() {
    this.setView();
  },
  methods: {
    setView() {
      this.$logjson('formSelect this.item', this.item)
      // debugger

      if (this.item.options) {
        try {
          this.selectOption = JSON.parse(JSON.stringify(this.item.options));
        } catch (error) { }

        return;
      }

      if (this.item.apiConfig) {
        this.$api({
          action: this.item.apiConfig.action,
          // ...apiData
        }).then((res) => {
          console.warn("form-formSelect-获取下拉配置项");
          if (res.code == 200) {
            this.selectOption = res.data.list;
          }
        });


        // this.$api(
        //   this.item.apiConfig
        //   // {
        //   //   url: "/app/system/newsChannel/list",
        //   //   method: "get",
        //   //   data: {
        //   //     page: 1,
        //   //     pageSize: 10,
        //   //   },
        //   // }
        // ).then((res) => {
        //   console.warn("form-formSelect-获取下拉配置项");
        //   if (res.code == 200) {
        //     this.selectOption = res.rows;
        //   }
        // });
      }
    },

    changeSelect(val) {
      console.warn("val", val);
      this.$emit("eventCallback", {
        from: "-formSelect",
        reflush: true,
      });
    },

    async remoteMethod(query) {



      if (query !== "") {
        this.loading = true;

        let { searchKey } = this.item.config;
        let { url, method, data } = this.item.apiConfig;
        let res = await this.$api({
          url: url,
          method: method,
          data: {
            ...data,
            page: 1,
            pageSize: 10,
            [searchKey]: query,
          },
        });

        if (res.code == 200) {
          this.selectOption = res.rows;
        }

        this.loading = false;
      } else {
        this.options = [];
      }
    },
  },
};
</script>

<style scoped lang="less">
.el-select {
  width: 100%;
}
</style>
